<template>
  <div class="full-box p-h-mini">
    <div class="box-title p-v-mini f-16">
      底图
    </div>
    <div
      class="box-content d-flex"
      style="flex-wrap: wrap;gap: 12px;"
    >
      <div
        v-for="item in mapList"
        :key="item.type"
        :class="['map-item c-pointer', currentMap === item.type ? 'active' : '']"
        @click="clickMap(item.type)"
      >
        <img
          class="map-img"
          :src="item.img"
        >
        <span
          class="map-text f-14"
          :style="{color: item.type === '2' || item.type === '4' ? '#fff' : '#76778c'}"
        >{{ item.text }}</span>
        <img
          class="select"
          src="../images/selected.png"
          v-show="currentMap === item.type"
        >
      </div>
    </div>
    <div class="box-title p-v-mini f-16">
      基础数据
    </div>
    <div class="box-content">
      <div
        class="map-data-item"
        v-for="(m, i) in mapData"
        :key="i"
      >
        <div class="flex-between">
          <div>
            <el-checkbox
              v-model="checkedMapData[m.type]"
              @change="(value) => changeMapDataChecked(m.type, value)"
            />
            <span
              class="f-14"
              style="margin-left: 14px;"
            >{{ m.text }}</span>
          </div>
          <i
            class="el-icon-loading"
            v-show="loading && m.type === 'yl'"
          />
        </div>
        <div
          v-show="checkedMapData.yl"
          v-if="m.type === 'yl'"
          class="yldate-container"
        >
          <div class="d-flex ai-c m-b-mini">
            <span class="yl-text f-14">开始：</span><el-date-picker
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              size="mini"
              v-model="ylStart"
              @change="getYlRange"
            />
          </div>
          <div class="d-flex ai-c">
            <span class="yl-text f-14">结束：</span><el-date-picker
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              size="mini"
              v-model="ylEnd"
              @change="getYlRange"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'LayerPanel',
  data () {
    return {
      mapList: [
        { text: '矢量地图', type: '1', img: require('../images/sl-map.png') },
        { text: '天地图（影像）', type: '2', img: require('../images/yx-map.png') },
        { text: '地形图', type: '3', img: require('../images/dx-map.png') },
        { text: '高德', type: '4', img: require('../images/gd-map.png') }
      ],
      currentMap: '3',
      checkedMapData: {},
      mapData: [],
      ylStart: this.$utils.createDate().format('YYYY-MM-DD 00:00:00'),
      ylEnd: this.$utils.createDate().format('YYYY-MM-DD 23:59:59'),
      loading: false
    }
  },
  created () {
    this.getMapData()
    this.$root.$on('updateMapMaking', this.updateMapMaking)
  },
  beforeDestroy () {
    this.$root.$off('updateMapMaking', this.updateMapMaking)
  },
  computed: {
    ...mapState('map-making', ['baseLayer'])
  },
  watch: {
    ylStart (v) {
      this.$store.commit('map-making/setBaseLayer', Object.assign(this.baseLayer, { ylStart: this.ylStart }))
    },
    ylEnd (v) {
      this.$store.commit('map-making/setBaseLayer', Object.assign(this.baseLayer, { ylEnd: this.ylEnd }))
    }
  },
  methods: {
    updateMapMaking () {
      this.clickMap(this.baseLayer.currentMap)
      this.checkedMapData = Object.assign({}, this.checkedMapData, this.baseLayer.checkedMapData)
      this.ylStart = this.baseLayer.ylStart
      this.ylEnd = this.baseLayer.ylEnd
      for (const key in this.checkedMapData) {
        if (Object.hasOwnProperty.call(this.checkedMapData, key)) {
          const element = this.checkedMapData[key]
          this.changeMapDataChecked(key, element)
        }
      }
    },
    clickMap (type) {
      if (type === this.currentMap) return
      this.$emit('changeMap', type, this.currentMap)
      this.currentMap = type
      this.$store.commit('map-making/setBaseLayer', Object.assign(this.baseLayer, { currentMap: this.currentMap }))
    },
    async getMapData () {
      const { rows } = await this.$request.singleTableOperation({
        url: '/grid/getTableData',
        metaSet: 'WATF_B_SYS_LAYER_INFO_ZTT',
        methodCode: 'select',
        methodParams: {}
      })
      const list = rows.map(item => ({
        text: item.LAYER_NAME,
        type: item.LAYER_ID,
        sn: 100 + item.LAYER_ORD,
        layerType: item.LAYER_TYPE,
        layerUrl: item.LAYER_URL,
        props: JSON.parse(item.LAYER_PARAMS),
        visible: item.LAYER_VISIBLE === '1'
      }))
      this.$emit('addBaseMapData', list)
      this.mapData = list.concat([
        {
          text: '道路/街道',
          type: 'dl'
        },
        {
          text: '雨量分布图',
          type: 'yl'
        }
      ])
      const map = {}
      this.mapData.forEach(item => {
        map[item.type] = item.visible || false
      })
      this.checkedMapData = map
      this.$store.commit('map-making/setBaseLayer', Object.assign(this.baseLayer, { checkedMapData: this.checkedMapData }))
    },
    async changeMapDataChecked (type, value) {
      if (type === 'dl') {
        this.$emit('changeDlMap', value)
      } else if (type === 'yl') {
        this.getYlRange(value)
      } else {
        this.$emit('switchLayerVisible', 'base-' + type, value)
      }
      this.$store.commit('map-making/setBaseLayer', Object.assign(this.baseLayer, { checkedMapData: this.checkedMapData }))
    },
    async getYlRange (visible) {
      this.loading = true
      if (!visible) {
        this.$emit('renderYlMap', { visible })
        return
      }
      const { polygons, rainRange, rangeColor } = await this.$request.formDataPost(window.outApiHw + 'hw-api/outInterface/rainAnalyziMapOut', {
        addvcd: 130000,
        btime: this.ylStart,
        etime: this.ylEnd,
        rainRange: ''
      })
      this.$emit('renderYlMap', { polygons, rainRange, rangeColor, visible })
      this.loading = false
    }
  }
}
</script>

<style lang="scss" scoped>
.box-title {
  color: #76778e;
}

.map-item {
  width: calc(50% - 6px);
  height: 90px;
  position: relative;
  border: 1px solid #969696;

  .map-text {
    position: absolute;
    left: 9px;
    top: 5px;
    color: #76778c;
  }

  .map-img {
    width: 100%;
    height: 100%;
  }

  > .select {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 16px;
    height: 16px;
  }

  &.active,
  &:hover {
    border-color: #0080ff;
  }
}

.map-data-item {
  background: #f3f6f9;
  padding: 10px 14px;
  color: #76778c;

  &:not(:last-child) {
    margin-bottom: 10px;
  }

  .yldate-container {
    margin-top: 10px;
    border-top: 1px solid #dcdfe6;
    padding: 17px 0 10px;

    .yl-text {
      white-space: nowrap;
      color: #76778c;
    }
  }

  ::v-deep .el-checkbox__inner {
    border: 1px solid #c8d3db;
    border-radius: 4px;
  }

  ::v-deep .is-checked > .el-checkbox__inner {
    border: 1px solid #0080ff;
    background-color: #f3f6f9;

    &::after {
      border-color: #0080ff;
    }
  }
}
</style>
